import React, { Component } from 'react';
import {
    Card, Button, Icon, Select, Input, Table
} from 'antd';
import LinkButton from '../../components/link-button';
import { reqProducts } from '../../api/index';

import './product.less';

const { Option } = Select;

export default class Product extends Component {
    state = {
        loading: false,
        columns: [
            {
                title: '商品名称',
                dataIndex: 'name',
                render: text => <a>{text}</a>,
            },
            {
                title: '商品描述',
                dataIndex: 'desc',
            },
            {
                title: '价格',
                dataIndex: 'price',
                render: text => <span>{`￥${text}`}</span>,
            },
            {
                title: '状态',
                dataIndex: 'status',
                width: 80,
                render: status => {
                    const btnTitle = status === 1 ? '下架' : '上架';
                    const text = status === 1 ? '在售' : '已下架';
                    return (
                        <span style={{ display: 'block', textAlign: 'center' }}>
                            <Button type="primary">{btnTitle}</Button>
                            <span>{text}</span>
                        </span>
                    )
                },
            },
            {
                title: '操作',
                render: item => {
                    return (
                        <span>
                            <LinkButton>详情</LinkButton>
                            <LinkButton>修改</LinkButton>
                        </span>
                    )
                },
            },
        ],
        data: [],
        pageSize: 3,
    }

    componentDidMount () {
        this.getProducts(1);
    }

    getProducts = async (pageNumber) => {
        const { pageSize } = this.state;
        const list = await reqProducts(pageNumber, pageSize);
        console.log('getProducts', list);
        this.setState({
            data: list,
        })
    }

    handleChange = (value) => {
        console.log(`selected ${value}`);
    }

    render() {
        const title = (
            <span>
                <Select defaultValue="name" style={{ width: 200 }} onChange={() => this.handleChange()}>
                    <Option value="name">按名称搜索</Option>
                    <Option value="type">按类型搜索</Option>
                    {/* <Option value="disabled" disabled>Disabled</Option> */}
                </Select>
                <Input style={{ width: 200, margin: '0 10px' }} placeholder="输入关键字" />
                <Button type="primary">搜索</Button>
            </span>
        )

        const extra = (
            <Button type="primary">
                <Icon type="plus" />
                添加商品
            </Button>
        )

        return (
            <div className="container">
                <Card title={title} extra={extra}>
                    <Table
                        className="ant-table-tbody"
                        columns={this.state.columns}
                        dataSource={this.state.data}
                        bordered
                        loading={this.state.loading}
                        pagination={{ defaultPageSize: 5, }}
                    />
                </Card>
            </div>
        )
    }
}
